<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频播放</title>
</head>

<body>
  <video src="./video/纸船.mp4" poster="./images/cover.jpg" controls width="800"></video>
  <br>
  <button>播放</button>
  <button>暂停</button>
  <button>切换</button>
  <button>前进</button>
  <button>后退</button>
  <button>音量+</button>
  <button>音量-</button>
  <button>倍速播放</button>
  <br>
  <audio src="./video/演员.mp3" controls></audio>
  <script>
    // 获取视频dom节点
    var video = document.querySelector('video');
    // 获取btn按钮dom节点
    var btns = document.querySelectorAll('button');
    // 给按钮绑定事件
    // 类数组对象-》数组
    var arrList = Array.from(btns);
    arrList.forEach(function (item) {
      item.onclick = function (event) {
        console.log(event.target.innerText);
        var text = event.target.innerText;
        switch (text) {
          case '播放':
            video.play()
            break;
          case '暂停':
            video.pause()
            break;
          case '切换':
            // video.paused是当前视频是否暂停，返回boolean值
            if (video.paused) {
              video.play()
            } else {
              video.pause()
            }
            break;
          case '前进':
            // currentTime是当前视频的播放时间点
            video.currentTime += 5;
            break;
          case '后退':
            video.currentTime -= 5;
            break;
          case '音量+':
            if (video.volume > 0.9) {
              video.volume = 1
            } else {
              video.volume += 0.1
            }
            break;
          case '音量-':
            if (video.volume < 0.1) {
              video.volume = 0
            } else {
              video.volume -= 0.1
            }
            break;
          case '倍速播放':
            video.playbackRate = 2
            break;
        }
      }
    })
  </script>
</body>

</html>